<template>
    <div id="login">
        <h1>
            <img src="../../static/img/logoo.png" />
            <p>
                <a>短信登录</a>
                <a>密码登录</a>
            </p>
    
        </h1>
        <form action="javascript:;">
            <input ref="username" type="text" placeholder="手机/邮箱/用户名" />
            <input ref="password" type="password" placeholder="密码" />
            <div class="point ">
      温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表您已同意《用户服务协议》</div>
            <button class="denglu" @click="dengLu">登录</button>
        </form>
        <p class="about">关于我们</p>
        <p class="tishi" ref="tishi"></p>
        <div class="tianchong"></div>
    </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
import axios from 'axios'
export default {
    computed:{
    
    // ...mapState(['username'])
     },

    methods: {
        dengLu() {
            var username = this.$refs.username.value;
            var password = this.$refs.password.value;
            var value = this.$refs.tishi;
            var that = this;
            if (username) {
                 this.$store.commit('GETUSER',username);
            }
           
            if (/^\s*$/g.test(username)) {
                value.innerHTML = '用户名/邮箱/手机号码不能为空';
                value.style.visibility='visible'
            } else if (/^\s*$/g.test(password)) {
                value.innerHTML = '密码不能为空';
                 value.style.visibility='visible'
            } else if (!/(^1[0-9]{10}$)|(^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/.test(username)) {
                value.innerHTML = '用户名/邮箱/手机号码错误';
                 value.style.visibility='visible'
            } else {
                axios.get('http://localhost:3000/users/reg', {
                    params: {
                        username: username,
                        password: password
                    }
                }).then(function (res) {
                    alert(res.data[res.data.length - 1]);
                    // window.location.href="http://localhost:8080/#/myself";
                    that.$router.push('myself');

                }).catch(function (err) {
                    console.log(err);
                })
            }


        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
#login {
    padding-top: px2rem(60);
    text-align: center;
    background: #fff;
    h1 {
        img {
            width: px2rem(280);
            height: px2rem(112);
            margin-bottom: px2rem(30);
        }
        p {
            a {
                display: inline-block;
                color: #333;
                text-decoration: none;
                text-align: center;
                font-size: px2rem(28);
                margin: 0 px2rem(20);
                height: px2rem(46);
            }
            a:hover {
                color: #2395ff;
                border-bottom: 2px solid #2395ff;
                height: px2rem(45);
            }
        }
    }
    form {
        .point{
            margin: 0 auto;
            width: px2rem(580);
            color: #999;
            font-size: px2rem(25);
            margin-top: px2rem(40);
            text-align: left;
            line-height: px2rem(45);
        }
        width: 100%;
        text-align: center;
        .denglu {
            width: px2rem(600);
            height: px2rem(84);
            background: #00d762;
            border-radius: px2rem(10);
            color: #fff;
            font-size: px2rem(35);
            margin-top: px2rem(40);
            outline: none;
        }
        input {
            display: block;
            width: px2rem(200);
            margin: 0 auto;
            width: px2rem(600);
            height: px2rem(96);
            margin-top: px2rem(30);
            border: 1px solid #ddd;
            font-size: px2rem(30);
            padding-left: px2rem(20);
        }
    }
    .about {
        color: #999;
        font-size: px2rem(25);
        margin-top: px2rem(130);
    }
    .tishi{
        display: inline-block;
        height: px2rem(80);
        background: #333;
        color: #fff;
        font-size: px2rem(25);
        border-radius: px2rem(40);
        line-height: px2rem(80);
        padding: 0 px2rem(20);
        margin-top: px2rem(130);
        visibility: hidden;
    }
    .tianchong{
        min-height: 180px;
    }
}
</style>

